import "node_modules/ol/ol.css";
import './FullScreen.less';
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import {
    defaults as defaultControls, // 默认控制组件
    Zoom, //变焦能力，默认引入
    Attribution, // 版权
    FullScreen, // 全屏
    OverviewMap, // 鹰眼
    ZoomSlider, // 滑块变焦
    ZoomToExtent, // 点击按钮变焦预览全局
    ScaleLine, // 比例尺
    Rotate, // 可旋转的地图，这个没什么用
    MousePosition, // 这个触摸屏设备才有用，，web端没啥用
} from 'ol/control';

// import { OSM, Vector as VectorSource } from 'ol/source';
import OSM from 'ol/source/OSM';

let init = () => {
    // 图层
    let source = new OSM();
    // 地图
    const map = new Map({
        // 附着目标元素
        target: 'map',
        // 控制组件
        controls: defaultControls().extend([
            new FullScreen(),
            new OverviewMap({
                label: "鹰眼", // 折叠隐藏鹰眼时按钮label
                collapseLabel: "鹰眼（打开状态）", // 折叠展开鹰眼后按钮label
                collapsible: true, //鹰眼是否可以折叠
                layers: [
                    new TileLayer({
                        source: source,
                    })
                ], // 鹰眼的图层
                // target: 'overviewMap', // 可以自定义鹰眼附着的元素
                tipLabel: "hover提示",
            }),
            new ZoomSlider(), // 滑块变焦
            new ZoomToExtent(), // 点击按钮变焦预览全局
            new ScaleLine(), // 比例尺
        ]),
        // 图层（备注，layers图层不能和鹰眼layers共用一个，否则会有问题）
        layers: [
            new TileLayer({
                source: source,
            })
        ],
        // 视图
        view: new View({
            center: [500000, 6000000],
            zoom: 7,
        }),
    });
}

export default {
    init
}
